<template>
    <a-cascader :size="option.size" :disabled="readonly" :placeholder="option.placeholder" :allowClear="option.allowClear"
        v-model:value="SelectValue" :options="Dict" change-on-select />
</template>
<script setup>
import { watchEffect, ref, watch, inject } from 'vue';

const emit = defineEmits(['UpdateEvent'])
const props = defineProps(['option', 'Value']);

const readonly = ref(false);

watchEffect(() => {
    readonly.value = !!props.option.readonly
})

const SelectValue = ref([]);

const GetDict = inject('GetDict')
const Dict = ref([]);

watch(() => props.Value[props.option.key], val => {
    SelectValue.value = val
}, { immediate: true });

watch(SelectValue, (val) => {
    emit('UpdateEvent', props.option.key, val);
}, { deep: true })


if (Array.isArray(props.option.Dict)) {
    Dict.value = props.option.Dict;
} else {
    const DictKey = props.option.Dict.split(':');
    if (DictKey.length == 1) {
        GetDict(DictKey[0]).then(res => {
            Dict.value = res;
        })
    }
}


</script>
<style lang="less" scoped></style>